<template>
	<div class="new-course">
		<div class="new-course-main">
			<div class="new-course-t">
				<div class="title-hot">
					<div class="hot">HOT</div>
					<div class="hot-c"></div>
				</div>
				<div class="title-txt">新上好课</div>
			</div>
			<ul class="new-course-b">
				<li v-for="item in NewList" :key="item.id" @click="goDetail(item.id)">
					<img :src="item.courseCover" />
					<div class="course-content">
						<div class="course-item">{{ item.courseName }}</div>
						<div class="course-item-name">{{ courseTypeFn(item.courseLevel) }}●{{ item.clicks }}人报名</div>
						<div class="price">
							<div class="price-vip">会员专享</div>
							<h4>￥{{ item.discountPrice }}</h4>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup>
// api
import { mostNew } from '@/utils/api/course';

// 初始化 响应式 课程数据:
let NewList = ref([]);

// 混入mixin:
import courseType from '@/mixins/courseType';
let { courseTypeFn } = courseType();

// 生命同期:
onBeforeMount(() => {
	mostNew({
		pageNum: 1,
		pageSize: 8
	}).then(res => {
		NewList.value = res.data.pageInfo.list;
		console.log('课程数据:', res.data.pageInfo.list);
	});
});

// 跳转到课程详情页
let router = useRouter();
const goDetail = id => {
	router.push({
		path: '/course/detail',
		query: {
			id
		}
	});
};
</script>

<style scoped>
.new-course-main {
	width: 1000px;
	margin: 0 auto;
}
.new-course-t {
	display: flex;
}
.title-hot {
	display: flex;
}
.title-hot .hot {
	width: 65px;
	line-height: 25px;
	text-align: center;
	color: #ffff;
	background: linear-gradient(90deg, #ff727f 0%, #fc685c 1000%);
	border-radius: 5px 0 0 5px;
}
.title-hot .hot-c {
	width: 0;
	height: 0;
	border: 4px solid #fc685c;
	/* 做三角形 */
	border-bottom-color: transparent;
	border-right-color: transparent;
}
.title-txt {
	position: relative;
	margin-left: 11px;
	font-size: 23px;
	/* line-height: 35px; */
	color: #333333;
}
.title-txt:after {
	content: '';
	position: absolute;
	z-index: -1; /* 放在后面 */
	bottom: 0;
	left: 0;
	width: 120%;
	margin-left: -10%;
	height: 9px;
	background: linear-gradient(90deg, #fbf84f 0%, #fea935 100%);
	border-radius: 5px;
}
.new-course-b {
	margin-left: -40px;
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* 两种方法都可以 */
	/* display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; */
}
.new-course-b > li {
	margin-right: 10px;
	width: 235px;
	height: 275px;
	background: #ffffff;
	box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
	border-radius: 2px;
}
.new-course-b > li > img {
	width: 235px;
	height: 153px;
}
.course-content {
	height: 105px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2px 12px;
}
.course-content .course-item {
	font-size: 16px;
	font-weight: bold;
	color: #333333;
}
.course-content .course-item-name {
	font-size: 12px;
	color: #808080;
}
.price {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: bold;
	color: #fe7062;
}
.price-vip {
	width: 64px;
	height: 16px;
	font-size: 12px;
	text-align: center;
	color: #ffffff;
	background: linear-gradient(90deg, #ff928e 0%, #fe7062 99%);
	border-radius: 16px 0 16px 0;
}
.price > h4 {
	margin-left: 16px;
	font-size: 16px;
	color: #fe7062;
}
</style>
